/*清洗线大屏*/
<template>

<dv-full-screen-container class="background">
    <starBackground></starBackground>
    <dv-loading v-if="IsLoading == 1">Loading...</dv-loading>
    <div class="m-data-screen">
        <div class="header">
            <div class="header-bg-title">清洗线/缓存线看板</div>
            <div class="date">{{ timeDate }} {{ hourTime }}</div>
            <div v-show="false" class="headerleft">{{ timeDate }} {{ hourTime }}</div>
        </div>

        <div class="content">
            <div class="flex-col">
                <div class="content">
                    <BorderBox1>
                        <div style="display: flex;width: 100%;height: 100%; flex-direction: column;">
                            <div class="subtitle">清洗线看板 </div>
                            <div style="padding: 30px;flex: 1;display: flex;align-items: flex-start;" >
                                
                                <dv-scroll-board :config="tableData1"  />
                                <div v-if="false" class="table-container">
                                    <!-- <el-table
                                    :data="tableData"
                                    :row-style="{ backgroundColor: 'blue', color: 'white' }"
                                    :header-cell-style="{ display: 'none' }"
                                    borderless
                                    height="300px"
                                    >
                                    <el-table-column prop="column1" label="Column 1"></el-table-column>
                                    <el-table-column prop="column2" label="Column 2"></el-table-column>
                                    <el-table-column prop="column3" label="Column 3"></el-table-column>
                                    </el-table> -->
                                </div>

                                </div>
                            </div>
                    </BorderBox1>
                </div>
                <div class="root">
                    <BorderBox1>
                        <div style="display: flex;width: 100%;height: 100%; flex-direction: column;">
                            <div class="subtitle">设备报警 </div>
                            <div tag="alarm" style="padding:30px;flex: 1; display: flex;align-items: flex-start;">
                            
                                <dv-scroll-board v-show="alarmData1.data.length>0" 
                                    :config="alarmData1" style="border-radius: 10px;background-color: red;"  />
                            </div>
                        </div>
                    </BorderBox1>
                </div>
            </div>

            <div class="flex-col">
                <div class="content">
                    
                    <BorderBox1>
                        <div style="display: flex;width: 100%;height: 100%; flex-direction: column;">
                            <div class="subtitle">缓存洗线看板 </div>
                            <div style="padding: 30px;flex: 1;display: flex;align-items: flex-start;">
                                <div parent style="flex: 1;display: flex;height: 100%;position: relative;">
                                    <dv-scroll-board :config="tableData2"   />

                                    <!-- 缺料提醒 -->
                                    <div v-if="PartCaches.length>0" style="width: 20px;height: 100%;position: absolute; right: 10px; display: flex;flex-direction: column;">
                                                                
                                        <div v-for="d in PartCaches" style="flex: 1;display: flex;align-items: center;">
                                            <div v-if="d.cacheLineMinCount > d.cacheLineCount " style="width: 20px;;height: 20px;" class="blinking-circle"/>
                                        </div>
                                    </div>
                                </div>
                                
                                
                                   
                                
                                
                            </div>
                        </div>
                    </BorderBox1>
                </div>
                <div class="root">
                    <BorderBox1>
                        <div style="display: flex;width: 100%;height: 100%; flex-direction: column;">
                            <div class="subtitle">子篮寿命报警 </div>
                            <div tag="alarm" style="padding:30px;flex: 1; display: flex;align-items: flex-start;">
                            
                                <dv-scroll-board v-show="alarmData2.data.length>0" 
                                    :config="alarmData2" style="border-radius: 10px;background-color: red;"  />
                            </div>
                        </div>
                    </BorderBox1>
                </div>
            </div>
        </div>
       
       
    </div>
</dv-full-screen-container>
</template>

<script setup>
import FullScreenContainer from '@/views/components/dataScreen/full-screen-container.vue'
import starBackground from '@/views/components/starBackground.vue'
import { BorderBox1 } from '@kjgl77/datav-vue3'
const { proxy } = getCurrentInstance()
const SR  = proxy.signalr.SR
const timeDate = ref()
const hourTime = ref()
const time1 = ref()
const getHour = () => {
  let date = new Date()
  let hour = date.getHours().toString().padStart(2, '00')
  let minute = date.getMinutes().toString().padStart(2, '00')
  let second = date.getSeconds().toString().padStart(2, '00')
  hourTime.value = `${hour}:${minute}:${second}`
  time1.value = setTimeout(() => {
    time1.value && clearTimeout(time1.value)
    getHour()
    //changeData()
  }, 1000)
}

const getNowTime = () => {
  let date = new Date()
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  timeDate.value = `${year}年${month}月${day}日`
  getHour()
}
onMounted(() => {
  getNowTime()
  setTimeout(() => {
    IsLoading.value = 0;
  }, 300);
})
onBeforeUnmount(() => {
  time1.value = null
})

const IsLoading = ref(1)

const tableData1 = reactive(
    {
        data:[
                ["翅片QXA子篮缓存数量","1"],
                ["盖板QXK子篮缓存数量","100"],
                ["底板QXM子篮缓存数量","1"],
                ["水嘴焊环QXW子篮缓存数量","2"],
                ["定位柱焊环QXZ子篮缓存数量","5"],
                ["焊丝QXX子篮缓存数量","8"],
                ["焊片QXY子篮缓存数量","12"],
                ["中板QXH子篮缓存数量","13"],
                ["接头QXN子篮缓存数量","8"],
                ["定位柱QXG子篮缓存数量","1"]
            ],
        oddRowBGC:"#003B51",
        evenRowBGC:"#003B51",
        rowNum:10,
        align:['left','left']
    }
)



const tableData2 = reactive(
    {
        data:[
                ["翅片QXA子篮缓存数量","0"   ],
                ["盖板QXK子篮缓存数量","0"   ],
                ["底板QXM子篮缓存数量","0"     ],
                ["水嘴焊环QXW子篮缓存数量","0"    ],
                ["定位柱焊环QXZ子篮缓存数量","0"  ],
                ["焊丝QXX子篮缓存数量","0"        ],
                ["焊片QXY子篮缓存数量","0"       ],
                ["中板QXH子篮缓存数量","0"       ],
                ["接头QXN子篮缓存数量","0"        ],
                ["定位柱QXG子篮缓存数量","0"      ]
            ],
        oddRowBGC:"#003B51",
        evenRowBGC:"#003B51",
        rowNum:10,
        align:['left','left']

    }
)

const alarmData1 = reactive(
    {
        data:[
              //  ["L1子篮层数错误"],
            ],
        oddRowBGC:"#003B51",
        evenRowBGC:"#003B51",
        rowNum:2,
        align:['left','left']

    }
)
const alarmData2 = reactive(
    {
        data:[
            ],
        oddRowBGC:"#003B51",
        evenRowBGC:"#003B51",
        rowNum:2,
        align:['left','left']

    }
)


const PartCaches = reactive([])
function TipLoadingItems(caches)
{
    Object.assign(PartCaches,caches) 
    //console.log('PartCaches',PartCaches,caches)
}


onMounted(() => {
  window.addEventListener('beforeunload', handleBeforeUnload);

  proxy.signalr.Event.RegistOP10 = ()=>{
    SR.invoke('op10Request',1)
    SR.off('op10Receive') 
    SR.on("op10Receive", (data) => {
        //console.log("op10Receive",data) 
        let entraceArr = []
        let outArr = []
        TipLoadingItems(data.caches)
        for(let a of data.entraceLineDatas)
        {
            entraceArr.push([ a.name,a.count ])
        }
        for(let a of data.outLineDatas)
        {
            outArr.push([ a.name,a.count  ])
        }
        //console.log("op10Receive",entraceArr)
        Object.assign(tableData1.data,entraceArr) 
        Object.assign(tableData2.data,outArr) 
        let deviceAlarmArr = []

        // if(data.deviceAlarm.length === 0 )
        //     alarmData1.data.length = 0

        
         //   alarmData1.data.length = 0

         //先检查需要删除的项 
         for (let i = 0; i < alarmData1.data.length; i++) {
            let str = alarmData1.data[i][0]
            if (data.deviceAlarm.findIndex(x=>x === str ) <0  ) {
                alarmData1.data.splice(i, 1);
                i--; // 由于删除了一个元素，需要将索引回退一位
            }
        }

        for(let b of data.deviceAlarm)
        {
            if(alarmData1.data.findIndex(a=> a[0] === b ) <0 )
            {

                //console.log('添加', alarmData1.data,alarmData1.data.indexOf( [b]))
                alarmData1.data.push([b])
                //debugger
            }
        }
        
        //先检查需要删除的项 
        for (let i = 0; i < alarmData2.data.length; i++) {
            let str = alarmData2.data[i][0]
            if (data.ageAlarm.findIndex(x=>x === str ) <0  ) {
                alarmData2.data.splice(i, 1);
                i--; // 由于删除了一个元素，需要将索引回退一位
            }
        }

        for(let b of data.ageAlarm)
        {
            if(alarmData2.data.findIndex(a=> a[0] === b ) <0 )
            {

                //console.log('添加', alarmData1.data,alarmData1.data.indexOf( [b]))
                alarmData2.data.push([b])
                //debugger
            }
        }




        
    }) 
    console.log('OP10注册通信完成')
  }
  SR.onreconnected((connectionId) => {
      
      console.log('大屏断线重新连接成功' + connectionId)
      SR.invoke('op10Request',1)
    })
  proxy.signalr.Event.RegistOP10()
 
});
 
onUnmounted(() => {
  window.removeEventListener('beforeunload', handleBeforeUnload);
});
 
function handleBeforeUnload(event) {
  // 这里可以执行你的清理或保存操作
 
  SR.invoke('op10Request',0)
  proxy.signalr.Event.RegistOP10=()=>{}
 // event.preventDefault(); // 注意：在某些浏览器中，如果你调用了 preventDefault，可能会显示一个对话框询问用户是否真的要离开。
  event.returnValue = ''; // Chrome 需要这个返回值来阻止对话框显示
}





// 模拟表格数据
const tableData = ref([
  { column1: 'Data 1-1', column2: 'Data 1-2', column3: 'Data 1-3' },
  { column1: 'Data 2-1', column2: 'Data 2-2', column3: 'Data 2-3' },
  { column1: 'Data 3-1', column2: 'Data 3-2', column3: 'Data 3-3' },
  { column1: 'Data 4-1', column2: 'Data 4-2', column3: 'Data 4-3' },
  { column1: 'Data 5-1', column2: 'Data 5-2', column3: 'Data 5-3' },
  { column1: 'Data 6-1', column2: 'Data 6-2', column3: 'Data 6-3' },
  { column1: 'Data 7-1', column2: 'Data 7-2', column3: 'Data 7-3' },
  { column1: 'Data 8-1', column2: 'Data 8-2', column3: 'Data 8-3' },
  { column1: 'Data 9-1', column2: 'Data 9-2', column3: 'Data 9-3' },
  { column1: 'Data 10-1', column2: 'Data 10-2', column3: 'Data 10-3' },
  { column1: 'Data 11-1', column2: 'Data 11-2', column3: 'Data 11-3' },
  { column1: 'Data 12-1', column2: 'Data 12-2', column3: 'Data 12-3' },
  // 可以继续添加更多数据
]);



// pnpm install @dataview/datav-vue3  pnpm install @jiaminghi/data-view
//npm uninstall @jiaminghi/data-view pnpm uninstall @dataview/datav-vue3
</script>

<style lang='scss' scoped>
.table-container {
  width: 100%;
  overflow: hidden;
}

.el-table {
  border: none;
}

.el-table__body-wrapper {
  overflow: hidden;
  /* 隐藏滚动条 - Chrome、Safari 和 Opera */
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
}

.el-table__body-wrapper::-webkit-scrollbar {
  display: none; /* Chrome、Safari 和 Opera */
}
/* 取消表格行悬停变色效果
--el-table-row-hover-bg-color:
*/
.el-table {
    --el-table-row-hover-bg-color: inherit !important;
    --el-table-border-color:inherit !important;
}
:deep(.rowclass)
{
    background-color: #030409;
    color: white;
}

.subtitle{
    font-size: 2vw;
}



:deep(.dv-scroll-board .rows){
    border-radius: 10px;
    overflow: hidden;
}
:deep(.dv-scroll-board .rows .row-item){
    background-color: rgba(61, 73, 109, 0.209) !important;
    font-size:2vw;
}
:deep(.dv-scroll-board .rows .row-item>div:nth-child(1) ){
    width: 70% !important;
}
:deep(.dv-scroll-board .rows .row-item>div:nth-child(2) ){
    color: rgb(163 175 152) !important;
    width: 29% !important;
}

:deep(div[tag="alarm"] > .dv-scroll-board .rows .row-item){
    background-color: red !important;
    font-size:1.5vw;
}

:deep(div[tag="alarm"] > .dv-scroll-board .rows .row-item>div:nth-child(1) ){
    width: 90% !important;
}

.background
{
    background-color: #030409;
    color: white;
    
}


.content
{
    display: flex;
    justify-content:space-between;
    flex: 1;
    padding-bottom: 10px;
    box-sizing: border-box;
}

.flex-col
{
    display: flex;
    flex: 1;
    padding: 20px;
    flex-direction: column;
    .content{
        display: flex;
        flex: 7.5;
    }
    .root{
        display: flex;
        flex: 2.5;
        padding-bottom: 10px;
    }
}
/* 设置 div 为圆形并添加红色渐变背景 */
.blinking-circle {
//   width: 100px;
//   height: 100px;
  border-radius: 50%;
  /* 红色渐变背景 */
  background: radial-gradient(circle at center, #ff0000, #800000);
  /* 应用闪烁动画 */
  animation: blink 1s infinite alternate;
}
/* 定义闪烁动画 */
@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
</style>
<style lang="scss" scoped>
 @use './index.scss';
</style>